<template>
  <div class="base-panels bgWhite">
    <h2 class="title2 z">企业人员</h2>
    <Tabs v-model:activeKey="activeKey">
      <TabPane key="1" tab="注册人员">
        <reg></reg>
      </TabPane>
      <TabPane key="2" tab="职称人员">
        <prof></prof>
      </TabPane>
      <TabPane key="3" tab="安管人员">
        <safe></safe>
      </TabPane>
      <TabPane key="4" tab="岗位人员">
        <post></post>
      </TabPane>
      <TabPane key="5" tab="特种作业人员">
        <spec></spec>
      </TabPane>
      <TabPane key="6" tab="技术工人">
        <tech></tech>
      </TabPane>
      <template #renderTabBar="{ DefaultTabBar, ...props }">
        <component
            :is="DefaultTabBar"
            v-bind="props"
            :style="{ zIndex: 1, background: '#fff', textAlign: 'right' }"
        />
      </template>
    </Tabs>
  </div>
</template>
<script lang="ts">
import {defineComponent, ref } from 'vue';
import { Tabs  } from 'ant-design-vue';
import { reg , prof , safe , post , tech , spec } from "./comStaffItems";
export default defineComponent({
  components: {
    Tabs, TabPane: Tabs.TabPane ,
    reg , prof , safe , post , tech , spec
  },
  setup() {
    return {
      activeKey:ref('1')
    }
  }
})
</script>

<style lang="less" scoped>
.base-panels{
  position: relative;
  min-height: 400px;
  padding: 20px;
}

.title2.z{
  position: absolute;
  top: 28px;
  z-index: 10000;
}

::v-deep(.ant-tabs){
  .ant-tabs-nav .ant-tabs-tab {
    padding: 12px 5px;
  }
}
</style>

